<div class="layui-fluid">
	<div class="layui-row">
		<div class="layui-col-xs12">
			<div class="layui-card layui-backbox">
				<div class="layui-card-header">基本信息</div>
				<div class="layui-card-body" style="display: flex;">
					<form class="layui-form" action="/" lay-filter="richfilter">
						<input type="hidden" name="id">
						<div class="layui-form-item">
							<label class="layui-form-label  ">用户头像 <span class="reddot">*</span></label>
							<div class="layui-input-inline">
								<input type="hidden" name="photo" id="userphotoid" required lay-verify="required" />
								<div class="layui-upload-drag" id="userphotoup ">
									<i class="layui-icon"></i>
									<p>点击上传小于800K的1:1图片，或将文件拖拽到此处</p>
								</div>
							</div>
						</div>

						<div class="layui-form-item">
							<label class="layui-form-label">真实姓名 <span class="reddot">*</span></label>
							<div class="layui-input-inline">
								<input type="text" name="realName" required lay-verify="required" placeholder="请输入真实姓名" autocomplete="off"
								 class="layui-input">
							</div>
						</div>

							<div class="layui-form-item">
							<label class="layui-form-label">用户昵称</label>
							<div class="layui-input-inline">
								<input type="text" name="uname" required lay-verify="required" placeholder="请输入用户昵称" autocomplete="off" class="layui-input">
							</div>
						</div>

						<div class="layui-form-item">
							<label class="layui-form-label">用户性别</label>
							<div class="layui-input-inline">
								<input type="radio" name="sex" value="男" title="男" checked>
								<input type="radio" name="sex" value="女" title="女">
							</div>
						</div>

						<div class="layui-form-item">
							<label class="layui-form-label   ">所在地区</label>
							<div class="layui-input-inline input50box">
								<div class="">
									<select name="provinces" lay-filter="provincesselect" required lay-verify="required">
										<option value=" ">请选择省份</option>
									</select>
								</div>
								<div class="">
									<select name="city" lay-filter="cityselect" required lay-verify="required">
										<option value=" ">请选择城市</option>
									</select>
								</div>

							</div>
						</div>

						<div class="layui-form-item">
							<label class="layui-form-label">职业方向</label>
							<div class="layui-input-inline">
								<input type="text" name="careerPath" placeholder="请输入职业方向" autocomplete="off" class="layui-input">
							</div>
						</div>

						<div class="layui-form-item">
							<label class="layui-form-label">用户ID</label>
							<div class="layui-input-inline">
								<input type="text" name="tbUserID" placeholder="HH:123456789" autocomplete="off" class="layui-input">
							</div>
						</div>

						<div class="layui-form-item">
							<label class="layui-form-label">手机号码</label>
							<div class="layui-input-inline">
								<input type="text" name="mobile" lay-verify="phone" placeholder="请输入十一位的手机号码" autocomplete="off" class="layui-input">
							</div>
						</div>

						<div class="layui-form-item">
							<label class="layui-form-label">就职单位</label>
							<div class="layui-input-inline">
								<input type="text" name="company" placeholder="请输入就职单位" autocomplete="off" class="layui-input">
							</div>
						</div>
						
						<div class="layui-form-item">
							<label class="layui-form-label">工作年限</label>
							<div class="layui-input-inline">
								<input type="text" name="workingLife" placeholder="请输入工作年限" autocomplete="off" class="layui-input">
							</div>
						</div>

						<div class="layui-form-item">
							<label class="layui-form-label">个人介绍</label>
							<div class="layui-input-inline">
								<textarea id="demo" name="tbIntroduction" style="display: none;"></textarea>
							</div>
						</div>

						<div class="layui-form-item">
							<label class="layui-form-label">用户身份</label>
							<div class="layui-input-inline">
								<select name="tbUserIdentity">
									<option value="1">黑名单</option>
									<option value="2">白名单</option>
									<option value="3">普通</option>
								</select>
							</div>
						</div>

						<div class="layui-form-item">
							<label class="layui-form-label">关联帐号</label>
							<div class="layui-input-inline input50box">
								<select name="" lay-verify="">
									<option value="010">北京</option>
									<option value="021" disabled>上海（禁用效果）</option>
									<option value="0571" selected>杭州</option>
								</select>
								<div class="">
									<input type="text" name="title" required lay-verify="required" placeholder="请输入关联帐号号码" autocomplete="off"
									 class="layui-input">
								</div>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">职业证明</label>
							<div class="layui-input-inline">
								<input type="hidden" name="userProves" id="userphotoid" />
								<div class="layui-upload-drag" id="userphotoup">
									<i class="layui-icon"></i>
									<p>点击上传小于800K的图片，或将文件拖拽到此处</p>
								</div>

							</div>
						</div>



						<div class="layui-form-item">
							<div class="layui-input-block">

								<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
								<div class="layui-btn layui-btn-primary" id="returnqx">取消</div>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
<div id="teachleft">

</div>
<script type="text/html" id="urldemo">
	<!-- 线下 输入链接 -->
				<label class="layui-form-label">跳转链接</label>
			<div class="layui-input-inline">
				<input type="text" name="offlineUrl" lay-verify="required" placeholder="请输入链接" autocomplete="off"
				 class="layui-input" value="{{d.value}}" >
					<span class="tipsbox" >跳转链接不得违反平台法律法规</span>
			</div>
</script>

<script type="text/html" id="teacherdemo">
	<!-- 线下 输入链接 -->
			<label class="layui-form-label">线上课程</label>
		<div class="layui-input-inline" lay-filter="banners2" id="layuibanners2id">
			<select name="tbProdustsId" lay-verify="required" lay-search>
			 {{#  layui.each(d.data.data, function(index, item){ }}

								<option value="{{item.id}}" >{{item.title.substring(10)}}</option>
				{{#   }) }}
			</select>
		</div>
</script>



<!-- 脚本 -->
<script>
	layui.use(['form', 'sidebar', 'layedit', 'upload', 'laytpl', 'layer'], function() {
		var form = layui.form,
			$ = layui.jquery,
			layedit = layui.layedit,
			upload = layui.upload,
			laytpl = layui.laytpl;


		// 获取省份
		POSTAJAX(ProvincialGet, {}, function(res) {
			$.each(res.data, function(idx, obj) {
				$("select[name='provinces']").append('<option value="' + obj.id + '">' + obj.name + '</option>')
			})
			form.render();
			form.on('select(provincesselect)', function(data) {
				//监听选择省份
				$("select[name='city']").html('');
				console.log(data.value)
				POSTAJAX(CityGet, {
					pid: data.value
				}, function(res) {
					$.each(res.data, function(idx, obj) {
						$("select[name='city']").append('<option value="' + obj.id + '">' + obj.name + '</option>')
						form.render();
					})
				})
			});
		})




		form.on('select(bannerselect)', function(data) {
			//选择banner类型
			var thistype = data.value;
			if (thistype == 3) {
				//线下
				uplinefn('')
			} else if (thistype == 2) {
				// 线上
				downlinefn()
			} else {
				$("#urlid").html(' ');
			}
		});

		function uplinefn(value) {
			laytpl($("#urldemo").html()).render({
				title: "线上",
				Ttype: 3,
				value: value
			}, function(html) {
				$("#urlid").html(html);
			})
		}

		function downlinefn(id) {
			var itemjson = {
				currentPage: 1,
				pageSize: 12,
				search: '',
				shelves: '',
				startTime: '',
				stopTime: ''
			}

			POSTAJAX(VideoGet, itemjson, function(res) {


				laytpl($("#teacherdemo").html()).render(res, function(html) {
					$("#urlid").html(html);
					form.render();

					if (id) {
						console.log(id);
						$("#layuibanners2id").find("option[value='" + id + "']").prop("selected", true);
						form.render();
					}

				})
			})
		}

		upload.render({
			elem: '#userphotoup',
			url: HH_URL + FileUp,
			acceptMime: 'image/*',
			size: '800',
			accept: 'images',
			data: {
				fileType: 3
			},
			headers: {
				"ticket": JSON.parse(localStorage.getItem('HH_T')).ticket
			},
			done: function(res) {
				console.log(res)
				if (res.status == 200) {
					$("#userphotoid").val(res.data.filePath);
					$("#userphotoup").html('	<img src="' + IMG_URL + res.data.filePath + '" style=""width:100px" >');
					layer.msg("上传成功", {
						"icon": 1
					});
				}
			},
			error: function() {
				//请求异常回调
			}
		});

		upload.render({
			elem: '#phonebannerup',
			url: HH_URL + FileUp,
			acceptMime: 'image/*',
			size: '800',
			accept: 'images',
			data: {
				fileType: 3
			},
			headers: {
				"ticket": JSON.parse(localStorage.getItem('HH_T')).ticket
			},
			done: function(res) {
				console.log(res)
				if (res.status == 200) {
					$("#phoneimgurl").val(res.data.filePath);
					$("#phonebannerup").html('	<img src="' + IMG_URL + res.data.filePath + '" >');
					layer.msg("上传成功", {
						"icon": 1
					});
				}
			},
			error: function() {
				//请求异常回调
			}
		});


		form.render();
		var richdemo = layedit.build('demo');
		var router = layui.router();
		if (router.search.id) {
			// 有id的传参的值  查询 id
			POSTAJAX(BannerGetById, {
				tbId: router.search.id
			}, function(res) {
				form.val("richfilter", {
					"id": router.search.id,
					"title": res.data.title,
					"imgurl": res.data.imgurl,
					"mobileUrl": res.data.mobileUrl,
					"type": res.data.type,
					"offlineUrl": res.data.offlineUrl,
					"tbProdustsId": res.data.tbProdustsId
				})
				if (res.data.type == 3) {

					uplinefn(res.data.offlineUrl)
				} else if (res.data.type == 2) {
					downlinefn(res.data.tbProdustsId)
				}
				$("#userphotoup").html('	<img src="' + IMG_URL + res.data.imgurl + '" >');
				$("#phonebannerup").html('	<img src="' + IMG_URL + res.data.mobileUrl + '" >');
				layedit.setContent(richdemo, '111');

			})

			//修改
			form.on('submit(formDemo)', function(data) {
				if (layedit.getContent(richdemo) == '') {
					layer.msg("请输入详情内容", {
						"icon": 7
					})
				} else {
					// data.field.tbAgreementContent = layedit.getContent(richdemo)
					// data.field.tbId = router.search.tbId;
					POSTAJAX(BannerMod, data.field, function(res) {
						if (res.status == 200) {
							layer.msg("修改成功", {
								"icon": 1
							})
							form.render();
							location.href = '#/setup/list'
						} else {
							layer.msg("失败，请重试", {
								"icon": 2
							})
						}
					})
				}
				return false;
			});

		} else {
			// 新增
			//监听提交
			form.on('submit(formDemo)', function(data) {
				if (layedit.getContent(richdemo) == '') {
					layer.msg("请输入详情内容", {
						"icon": 7
					})
				} else {
					POSTAJAX(BannerAdd, data.field, function(res) {
						if (res.status == 200) {
							layer.msg("新增成功", {
								"icon": 1
							})
							richdemo = layedit.build('demo');
							form.render();
							location.href = '#/setup/list?typt=2'
						} else {
							layer.msg("失败，请重试", {
								"icon": 2
							})
						}
					})
				}
				return false;
			});

		}
		$("#returnqx").on("click", function() {
			location.href = '#/setup/list';

		})


	});
</script>
<!-- 样式 -->
<style scoped>
	.layui-form-item .layui-input-inline {
		float: left;
		width: 600px;
		margin-right: 10px;
	}
</style>
